* { padding: 0; margin: 0; box-sizing: border-box; transition: all 1s; }
*::before, *::after { box-sizing: border-box; }
html { height: 100%; }
body { height: 100%; display: flex; flex-direction: column; }
.code-wrapper { flex: 1; height: 50%; }
.code { overflow: hidden; height: 100%; }
.preview-wrapper { flex: 1; height: 50%; }
.speed-control { position: absolute; top: 0; right: 0; display: flex; flex-direction: column; }
.speed-control button { padding: 10px 16px; margin: 10px; border: none; border-radius: 4px; color: #888; background-color: rgba(255, 246, 0, 0.8); }
.speed-control button.active { box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.7); }
.speed-control button:focus { outline: none; }
.speed-control > button[data-speed="skip"] { color: #fff; background-color: rgba(255, 0, 0, 0.8); }
